前言

嗨，我是Hogan
目前在經營自己的自媒體 hogan.tech
主要分享一些有關於程式碼、軟體和科技業經驗分享
有興趣的讀者可以進一步關注我，進而獲得更多資訊唷！

未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系 繁體中文、英文、日文、簡體中文
觀看分類：React 白話文運動、其他系列

如果想要快速查找其他文章請點選目錄

成立 hogan.tech 的初衷是
希望每個正在這條路上探索的人，
都可以透過 Hogan.tech 嘗試進入程式領域。

前一篇繼續講解useState，以及提供舊版程式碼供比對

1. 新增setState為評價元件新增修改功能
2. 舊版的React狀態管理寫法

這一篇會介紹另一個 hook 函式， useEffect

1. useEffect 的概念
2. useEffect 語法

useEffect 的概念

我們已經學會了useState，那為什麼我們需要useEffect呢？

如果從生命週期的部分做講解的話，useEffect本身包含了三個命週期，分別為 componentDidMount 、componentWillUnmount 以及 componentDidUpdate。

useEffect 專門來處理一些所謂的副作用（ SideEffect），例如：資料獲取、訂閱、修改React元件。

讓我們透過以下舉例：

這邊是一個簡單的CheckBox元件，裡面包含了一個checkbox input，當我們希望使用者點擊了這個checkbox，就會顯示當前的checked狀態。

不過透過以下寫法會發現，他只會在元件顯示的時候告知我們現在的checked 是false。

點擊了checkbox ，則不會顯示任何東西。

import React, { useState } from 'react'

function CheckBox() {
    const [checked, setChecked] = useState(false);
    console.log(`checked: ${checked.toString()}`);
    return (
        <>
            <input
                type="checkbox"
                value={checked}
                onChange={() => setChecked(checked => !checked)}
            />
            {checked ? "checked" : "not checked"}
        </>
    )
}

有些人會思考，能不能把console.log 放在return 後面呢？

當然是不行，因為當一個元件return 之後，就不會在執行後面的程式碼

那我們應該要怎麼處理這種情況呢？

import React, { useState } from 'react'

function CheckBox() {
    const [checked, setChecked] = useState(false);
    return (
        <>
            <input
                type="checkbox"
                value={checked}
                onChange={() => setChecked(checked => !checked)}
                />
            {checked ? "checked" : "not checked"}
        </>
    )
    console.log(`checked: ${checked.toString()}`);
}

useEffect 就是專門處理這種問題的，先直接上程式碼

可以看到在 useEffect 的程式碼是放在return 前面，裡面包含了印出checked

只要此元件的狀態有被修改時，就會觸發一次useEffect 裡面的函式

import React, { useState } from 'react'
import { useEffect } from 'react';

function CheckBox() {
    const [checked, setChecked] = useState(false);
    useEffect(() => {
        console.log(`checked: ${checked.toString()}`);
    })
    return (
        <>
            <input
                type="checkbox"
                value={checked}
                onChange={() => setChecked(checked => !checked)}
            />
            {checked ? "checked" : "not checked"}
        </>
    )
}

useEffect 語法

useEffect 可以放入兩種變數，分別為 callback function 以及 array 。

useEffect(callback,array)

1. callback：為callback函式，可以用來處理需要執行的行為以及邏輯
2. array：陣列，可以放入需要監聽的dependency (下一篇文章會深入講解)

以下列來說，此useEffect 會針對這個UI元件的任何修改

執行一次 console.log(checked ? "checked" : "not checked");

useEffect(() => {
	console.log(checked ? "checked" : "not checked");
})

當然除了 console.log 以外，也可以放入其他的函式，例如：儲存localStorage

useEffect(() => {
	localStorage.setItem("checkbox-value",checked)
})

結語

這一篇講解了useEffect的概念，下一篇文章會深入講解 useEffect 的生命週期，以及 dependency 的概念。

如果有任何建議與疑問也歡迎留言！

如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～